<template>
  <div class="hm-home">
    <div class="header">
      <div class="tabs">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          :class="{ active: isActive(tab.name) }"
          @click="setActive(tab.name)"
        >
          <router-link :to="tab.url">
            {{ tab.name }}
          </router-link>
          <span v-if="isActive(tab.name)" class="underline"></span>
        </div>
      </div>
      <img src="@/assets/logo.png" alt="" width="64px" height="28px" class="logo" />
    </div>
    <div class="van-hairline--bottom"></div>

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      activeTab: '推荐',
      tabs: [
        { id: 1, name: '推荐', url: '/home/recommend' },
        { id: 2, name: '最新', url: '/home/new' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    isActive(tab) {
      return this.activeTab === tab
    },
    setActive(tab) {
      this.activeTab = tab
    }
  }
}
</script>
<style lang="less" scoped>
.hm-home {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 44px;

    .tabs {
      display: flex;
      width: 96px;
      height: 100%;
      justify-content: space-evenly;
      color: #999;
      align-items: center;

      div {
        position: relative;
        text-decoration: none;

        a {
          text-decoration: none;
          color: #5e5a5a;

          &.active {
            color: #000;
          }
        }

        &.active {
          .underline {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50%; // 下划线长度短一点
            height: 2px;
            background-color: #333;
            transition: width 0.3s, transform 0.3s;
          }
        }
      }
    }
  }
}
</style>
